<template>
	<div class="spread con sale_index">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/sale' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>销售信息12</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="conditions">
			<div class="conItem">
				<span class="item-label">PartNo</span>
				<el-input v-model="PartNo" placeholder="请输入内容" style="width: 200px;"></el-input>
			</div>
			<div class="conItem">
				<span class="item-label">Date in</span>
				<el-select v-model="DateVal" placeholder="请选择">
					<el-option v-for="item in DateIn" :key="item.DateIn" :label="item.PaymentTerm" :value="item.PaymentTerm"></el-option>
				</el-select>
			</div>
			<div class="conItem">
				<span class="item-label">Sales</span>
				<el-select v-model="DateVal" placeholder="请选择">
					<el-option v-for="item in DateIn" :key="item.DateIn" :label="item.PaymentTerm" :value="item.PaymentTerm"></el-option>
				</el-select>
			</div>
			<div class="conItem">
				<span class="item-label">Buyer</span>
				<el-select v-model="DateVal" placeholder="请选择">
					<el-option v-for="item in DateIn" :key="item.DateIn" :label="item.PaymentTerm" :value="item.PaymentTerm"></el-option>
				</el-select>
			</div>
			<div class="conItem">
				<el-checkbox-group class="checkbox" v-model="checkList">
					<el-checkbox label="Bom"></el-checkbox>
					<el-checkbox label="Hot"></el-checkbox>
					<el-checkbox label="Active"></el-checkbox>
					<el-checkbox label="Brief"></el-checkbox>
				  </el-checkbox-group>
			</div>
			<div class="conItem">
				<el-button type="primary" @click="handerSearch">Refresh</el-button>
			</div>
		</div>
		<div class="tableTopTool">
			<el-button type="text" size="mini" icon="el-icon-tickets" @click="add()">Add RFQ</el-button>
			<el-button type="text" size="mini" icon="el-icon-tickets" @click="add()">Edit RFQ</el-button>
			<el-button type="text" size="mini" icon="el-icon-tickets" @click="add()">Rest RFQ Date</el-button>
			<el-button type="text" size="mini" icon="el-icon-tickets" @click="add()">Set Hot</el-button>
			<el-button type="text" size="mini" icon="el-icon-tickets" @click="add()">Add Sales Quotation</el-button>
			<el-button type="text" size="mini" icon="el-icon-tickets" @click="add()">Export RFQ</el-button>
			<el-button type="text" size="mini" icon="el-icon-tickets" @click="add()">So Confirmed</el-button>
			<div style="float:right ">
				<span class="el-pagination__total">共 {{ page.total }} 条数据</span>
			</div>
		</div>
		<el-table
			v-loading="loading"
			element-loading-text="拼命加载中"
			:data="tableData"
			style="width: 100%"
			:height="tableHeight"
			border
			fit
			highlight-current-row
		>
			<el-table-column label="VIP" fixed prop="FModel" sortable>
				<template slot-scope="scope">
					<span>{{ scope.row.FModel }}</span>
				</template>
			</el-table-column>
			<el-table-column label="Hot" fixed prop="FItemFactoryStyle" sortable>
				<template slot-scope="scope">
					<span>{{ scope.row.FItemFactoryStyle }}</span>
				</template>
			</el-table-column>
			<el-table-column label="QN" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.FChartNumber }}</span>
				</template>
			</el-table-column>
			<el-table-column label="Status" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.style }}</span>
				</template>
			</el-table-column>
			<el-table-column label="Customer" width="110">
				<template slot-scope="scope">
					<span>{{ scope.row.subject }}</span>
				</template>
			</el-table-column>
			<el-table-column label="Brand" width="120">
				<template slot-scope="scope">
					<span>{{ scope.row.patent }}</span>
				</template>
			</el-table-column>
			<el-table-column label="PartNo" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.special }}</span>
				</template>
			</el-table-column>
			<el-table-column label="Qty'" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.designer }}</span>
				</template>
			</el-table-column>

			<el-table-column label="Target" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.pagenum }}</span>
				</template>
			</el-table-column>
			<el-table-column label="D/C" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.Fversion }}</span>
				</template>
			</el-table-column>
			<el-table-column label="Package" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.Falias }}</span>
				</template>
			</el-table-column>
			<el-table-column label="LeadFree" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.ifmodel }}</span>
				</template>
			</el-table-column>
			<el-table-column label="CustomerPartNo" width="120">
				<template slot-scope="scope">
					<span>{{ scope.row.FSupplyIDName }}</span>
				</template>
			</el-table-column>
		</el-table>

		<div class="block el-pagination" style="margin-top: 0px; overflow: hidden;">
			<el-pagination
				class="pages"
				background
				layout="prev, pager, next"
				:total="page.total"
				:page-size="page.size"
				@current-change="handleCurrentChange"
				:current-page.sync="page.currentPage"
			></el-pagination>
		</div>
	</div>
</template>

<script type="text/javascript">
export default {
	data() {
		var sdDate = [];
		return {
			loading: false,
			tableData: [],
			tableHeight: window.innerHeight - 403 < 560 ? 700 : window.innerHeight - 403,
			token: '',
			keyword: '',
			rantime: [],
			currentRow: [],
			arr: [],
			listQuery: { sortby: '', order: 'desc' },
			fileDwonload: false,
			url: '',
			btt: [],
			page: {
				total: 0,
				size: 0,
				currentPage: 1,
				num: 1
			},
			sort: 1,
			// 0808
			PartNo:'',
			DateIn:[],
			DateVal:'',
			checkList: ['Active','Brief']
		};
	},

	created() {
		this.token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
		this.getDateIn();
	},
	mounted() {
		
		// 动态设置表格高度适应窗口
		window.onresize = () => {
			let a = window.innerHeight;
			this.tableHeight = a - 403;
		};
	},
	methods: {
		
		
		detailList() {
			if (this.currentRow.length <= 0) {
				this.$notify({ type: 'error', message: '请选择一行' });
				return false;
			}
			// 关闭跳转
			this.$router.push({ path: '/api/sale/detail?dd=' + JSON.stringify(this.currentRow) });
		},
		handleEdit(index, row) {
			// console.log(index, row);
			axios.get('/api/order/status?id=' + row.id + '&type=1' + '&order_sn=' + row.order_sn).then(res => {
				this.$notify({
					type: 'success',
					title: '状态更新成功',
					message: res.data.message
				});
				this.getGoodsList();
			});
		},
		handerSearch() {
			this.page.num = 1;
			this.getstyleList();
		},

		handleCurrentChange(val) {
			this.page.num = val;
			this.getstyleList();
		},
		handleDelete(index, row) {
			// console.log(index, row);
			axios.get('/api/order/status?id=' + row.id + '&type=2' + '&order_sn=' + row.order_sn).then(res => {
				this.$notify({
					type: 'success',
					title: '状态更新成功',
					message: res.data.message
				});
				this.getGoodsList();
			});
		},
		addTime(m) {
			return m < 10 ? '0' + m : m;
		},

		getTime() {
			var date = new Date();
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			// console.log(d)
			let time = y + '-' + m + '-' + d;
			let d1 = '01';
			let time1 = y + '-' + m + '-' + d1;
			this.rantime[0] = time1;
			this.rantime[1] = time;
		},

		timeFormat(shijianchuo) {
			//shijianchuo是整数，否则要parseInt转换
			var time1 = new Date(shijianchuo);
			var y = time1.getFullYear();
			var m = time1.getMonth() + 1;
			var d = time1.getDate();
			var h = time1.getHours();
			var mm = time1.getMinutes();
			var s = time1.getSeconds();
			return y + '-' + this.addTime(m) + '-' + this.addTime(d) + ' ' + this.addTime(h) + ':' + this.addTime(mm) + ':' + this.addTime(s);
		},
		getDateIn() {
			axios
				.get('/api/customer/paymentterm')
				.then(result => {
					if (result.data.code == 200) {
						this.DateIn = result.data.result;
					}
				})
				.catch(error => {});
		},
	}
};
</script>

<style lang="scss">
.sale_index {
	.sort.el-select .el-input {
		width: 140px;
	}
	.el-select .el-input{
		width: 150px;
	}
	.el-button-group {
		position: relative;
		top: -1px;
	}
	
	.checkbox{
		margin-top: 5px;
	}
}


.el-pagination__total {
	float: left;
	margin-top: 2px;
}

</style>
